<div class="ui grid sam-project">

	<div class="three wide column">
        <!-- filter criteria area -->
        <div class="criterias">
            <div class="inputable ui input mini">
                <input type="text" placeholder="文字筛选" ng-model="subSearch" />
            </div>
            <div class="clickable" ng-show="isCriteriaValid()">
                <a class="ui black small label clearall" ng-click="resetCriteria()">
                    清空筛选条件
                </a>

                <a class="ui teal small label"
                   ng-repeat="criteria in selected_atom" ng-show="criteria.id">
                    {{ criteria.name }}
                    <i class="delete icon" ng-click="removeCriteria(criteria.id)"></i>
                </a>
            </div>
        </div>

		<div class="ui vertical menu filter">
			<div class="item">
				<a><b>应用</b></a>
				<div class="menu">
					<a class="item" ng-repeat="program in programs" 
						ng-click="filterProjectsByAtom(program._id, 'program', program.name)">
						<i ng-class="isChecked(program._id, 'program')"></i>
						{{program.name}}
					</a>
				</div>
			</div>
			<div class="item">
				<a><b>状态</b></a>
				<div class="menu">
					<a class="item" ng-repeat="status in statuses"
						ng-click="filterProjectsByAtom(status._id, 'status', status.name)">
						<i ng-class="isChecked(status._id, 'status')"></i>
						{{status.name}}
					</a>
				</div>
			</div>

			<div class="item">
				<a><b>交互设计师</b></a>
				<div class="menu">
					<a class="item" ng-click="filterProjectsByAtom(personnel._id, 'ia', personnel.name)"
						ng-repeat="personnel in personnels | orderBy: 'domain_account' | filter: {position: '交互设计师'}">
						<i ng-class="isChecked(personnel._id, 'ia')"></i>
						{{personnel.name}}
					</a>
				</div>
			</div>
			<div class="item">
				<a><b>视觉设计师</b></a>
				<div class="menu">
					<a class="item" ng-click="filterProjectsByAtom(personnel._id, 'ga', personnel.name)"
						ng-repeat="personnel in personnels | orderBy: 'domain_account' | filter: {position: '视觉设计师'}">
						<i ng-class="isChecked(personnel._id, 'ga')"></i>
						{{personnel.name}}
					</a>
				</div>
			</div>
			<div class="item">
				<a><b>前端设计师</b></a>
				<div class="menu">
					<a class="item" ng-click="filterProjectsByAtom(personnel._id, 'fe', personnel.name)"
						ng-repeat="personnel in personnels | orderBy: 'domain_account' | filter: {position: '前端设计师'}">
						<i ng-class="isChecked(personnel._id, 'fe')"></i>
						{{personnel.name}}
					</a>
				</div>
			</div>
			<div class="item">
				<a><b>产品经理</b></a>
				<div class="menu">
					<a class="item" ng-click="filterProjectsByAtom(personnel._id, 'pd', personnel.name)"
						ng-repeat="personnel in personnels | orderBy: 'domain_account' | filter: {position: '产品经理'}">
						<i ng-class="isChecked(personnel._id, 'pd')"></i>
						{{personnel.name}}
					</a>
				</div>
			</div>

			<div class="item">
				<a><b>所属版本</b></a>
				<div class="menu">
					<a class="item" ng-repeat="version in versions track by $index"
						ng-click="filterProjectsByAtom(version._id, 'version', version._id)">
						<i ng-class="isChecked(version._id, 'version')"></i>
						{{version._id}}
					</a>
				</div>
			</div>
		</div>
	</div>

	<div class="thirteen wide column">

		<!-- data area -->
		<table class="ui table segment small data_program">
			<thead>
				<tr>
					<th>应用</th>
					<th>名称</th>
					<th>版本</th>
					<th>JIRA（产品）</th>
					<th>交互</th>
					<th>视觉</th>
					<th>前端</th>
				</tr>
			</thead>
			<tr ng-repeat="project in filtered = (projects | orderBy: '-related_version' | SamProjectSideFilter:selected_atom) | filter:subSearch ">
				<td>
					<span ng-if="project.program.name == '官网'" class="cate_icon_o"></span>
					<span ng-if="project.program.name == '网站联盟'" class="cate_icon_u"></span>
					<span ng-if="project.program.name == '触屏站'" class="cate_icon_t"></span>
					<span ng-if="project.program.name == '易保易赔'" class="cate_icon_c"></span>
					<span ng-if="project.program.name == 'App-旅游保险'" class="cate_icon_m"></span>
					<span ng-if="project.program.name == '组件'" class="cate_icon_mod"></span>
					<span ng-if="project.program.name == '天猫'" class="cate_icon_tmall"></span>
					<span class="program_text">{{project.program.name}}</span>
				</td>
				<td>{{project.name}}</td>
				<td>{{project.related_version}}</td>
				<td>
					<a href="http://jira.vemic.com/browse/{{project.jira_uri}}"
						ng-if="project.jira_uri" target="_blank">
						{{project.jira_uri}}
					</a>
                    <div class="sub" ng-if="project.personnel_pd">{{project.personnel_pd.name}}</div>
				</td>
				<td>
					<a href="{{project.ix_uri}}" ng-if="project.ix_uri" target="_blank">查看</a>
					<div class="sub" ng-if="project.personnel_ia">{{project.personnel_ia.name}}</div>
				</td>
				<td>
					<a href="{{project.gandolf_uri}}" ng-if="project.gandolf_uri" target="_blank">查看 </a>
					<div class="sub" ng-if="project.personnel_ga.name">{{project.personnel_ga.name}}</div>
				</td>
				<td>
					<div ng-if="project.personnel_fe.name">{{project.personnel_fe.name}}</div>
				</td>
			</tr>
		</table>
	</div>
</div>

